---
import '../styles/styles.css';
import { ClientRouter } from 'astro:transitions';
import Footer from '../components/Footer.astro';
import Nav from '../components/Nav.astro';
import { SITE } from '@config';

export interface Props {
	title: string;
  description?: string;
}

const { title, description } = Astro.props as Props;
---

<!doctype html>
<html lang="en" class="overflow-y-auto" >
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
		<meta name="generator" content={Astro.generator} />
		<meta name="view-transition" content="same-origin" />
    <!-- General Meta Tags -->
    <title>{title}</title>
		<ClientRouter />
    <meta name="title" content={title} />
    <meta name="description" content={description || SITE.desc} />
    <meta name="author" content={SITE.author} />
    <link rel="sitemap" href="/sitemap-index.xml" />
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YJV9MPDM78"></script>
    <script>
      // @ts-nocheck
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-YJV9MPDM78');
    </script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7831922620358624"
    crossorigin="anonymous"></script>
	</head>
	<body class="font-sans bg-gray-900 text-white">
		<div class="flex flex-col">
			<Nav />
      <slot />
      <Footer />
		</div>
	</body>

</html>
